<template>
	<view class="">
		<view class="section">
		      <view style="width:17%;">选择时间:</view>
		      <picker mode="date" v-model="startTime" @change="getStartTime">
		        <view class="picker">
		         {{startTime}}
		        </view>
		      </picker>
		        至
		      <picker mode="date" v-model="endTime" @change="getEndTime">
		        <view class="picker">
		         {{endTime}}
		        </view>
		      </picker>
		      <button  @click="queryTimeData">查询</button>
		  </view>
		  <view class="ul">
			<view class="li">
				<text>订货门店数量：</text> <view>{{shopCount}}</view> 
			</view>
			<view class="li">
				<text>订货件/箱：</text>  <view>{{orderCount}}</view> 
			</view>
			<view class="li">
				<text>订货单品数量：</text>  <view> {{skuCount}}</view>
			</view>
		  </view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				startTime:this.common.formatDate(new Date()),
				endTime:this.common.formatDate(new Date()),
				shopId:'',
				userId:this.common.getStore('UserId'),
				"orderCount": 0,
				"shopCount": 0,
				"skuCount": 0
			}
		},
		methods:{
			getStartTime(e){
				this.startTime = e.detail.value;
			},
			getEndTime(e){
				this.endTime = e.detail.value;
			},
			queryTimeData(){
				let data = {
					StartTime:this.startTime,
					EndTime:this.endTime,
					ShopId:this.shopId,
					UserId:this.userId
				}
				this.$api.getReportApi(data).then(res=>{
					this.orderCount = res.Data.orderCount;
					this.shopCount = res.Data.shopCount;
					this.skuCount = res.Data.skuCount;
				})
			}
		},
		onLoad(options){
			this.shopId = options.shopId
			this.queryTimeData();
		}
	}
</script>

<style>
	.ul{
		border-top: 1rpx solid #bbb;
	}
	
	.ul .li {
		padding-left: 24%;
		height: 150rpx;
		line-height: 150rpx;
		font-size: 34rpx;
		display: flex;
		border-bottom: 1rpx solid #bbb;
	}
	.ul .li text{
		width: 40%;
		text-align-last:justify;
		display: block;
		font-size: 32rpx;
	}
	.ul .li view{
		color: red;
	}
	.section{
	  display: flex;
	  height: 50rpx;
	  line-height: 50rpx;
	  padding: 30rpx 0rpx 0rpx 30rpx;
	  background: #fff;
	  font-size:28rpx;
	  color: #999999;
	  padding-bottom: 30rpx;
	}
	.section picker{
	  width: 26%;
	  border:1px solid rgba(216,216,216,1);
	  text-align: center;
	  border-radius: 15rpx;
	  margin: 0 10rpx;
	  color: #212121;
	  font-size:28rpx;
	}
	.section button{
	  margin-left: 1%;
	  background:#1791f4;
	  color: #fff;
	   height: 50rpx;
	   width: 120rpx;
	   font-size: 28rpx;
	  line-height: 50rpx;
	}
</style>
